<template>
  <view class="wrap" :style="colorStyle">
    <view class="title_box"> 注册账号即可立即体验 </view>
    <view class="ChangePassword">
      <form @submit="submitHandler">
        <view class="list">
          <view class="item acea-row row-middle">
            <text class="label_box">账号</text>
            <input
              type="number"
              placeholder="请输入手机号"
              placeholder-class="placeholder"
              name="password"
              v-model="account"
            />
          </view>
          <view class="item acea-row row-between-wrapper">
            <text class="label_box">验证码</text>
            <input
              type="number"
              placeholder="填写验证码"
              placeholder-class="placeholder"
              class="codeIput"
              name="captcha"
              :value="captcha"
            />
            <button
              class="code"
              :class="disabled === true ? 'on' : ''"
              :disabled="disabled"
              @click="code"
            >
              {{ text }}
            </button>
          </view>
          <view class="item acea-row row-middle">
            <text class="label_box">企业名称</text>
            <input
              type="text"
              placeholder="请输入企业名称"
              placeholder-class="placeholder"
              name="enterprise_name"
              v-model="enterprise_name"
            />
          </view>
          <view class="item acea-row row-middle">
            <text class="label_box">设置密码</text>
            <input
              type="text"
              placeholder="设置密码"
              placeholder-class="placeholder"
              name="password"
              :value="password"
            />
          </view>
          <view class="item acea-row row-middle">
            <text class="label_box">确认密码</text>
            <input
              type="text"
              placeholder="确认密码"
              placeholder-class="placeholder"
              name="qr_password"
              :value="qr_password"
            />
          </view>
        </view>
        <button form-type="submit" class="confirmBnt bg-color">确认注册</button>
      </form>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { register, sendsms, getUserInfo } from "@/api/user";
import { Tips } from "@/utils";
import { useSendCode } from "@/composables/useSendCode";
const { disabled, text, sendCode } = useSendCode();
import { useTheme } from "@/composables/useTheme";
const { colorStyle } = useTheme();
import { onLoad, onReady, onShow } from "@dcloudio/uni-app";
import { hidePageNavInWechatBrowser } from "@/composables/useHiddenNavbar";
import { useTokenStore, useUserInfoStore, useBusinTokenStore } from "@/store";
import themeList from "@/utils/theme";
import { getWechatShare } from "@/api/public";
// import hideWechatMenu from "@/composables/hideWechatMenu";
import setWechatToken from "@/composables/setWechatToken";
onShow(async () => {
  let { data } = await getWechatShare();
  let redirect_url = `${data.home_url}/pages/users/register`;
  setWechatToken(redirect_url); //设置token新用户直接跳到注册页面
  // hideWechatMenu();
});
onReady(() => {
  hidePageNavInWechatBrowser();
});
let account = ref("");
let enterprise_name = ref("");
let password = ref("");
let captcha = ref("");
let qr_password = ref("");
// 获取验证码
async function code() {
  console.log(account.value, "账号");

  if (!account.value)
    return Tips({
      title: `请填写账号`,
    });
  if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(account.value))
    return Tips({
      title: `请输入正确的号码`,
    });
  if (!disabled.value) {
    uni.showLoading();
    let codeData = await getCodeHandler();
    if (codeData.code == 1) {
      uni.showToast({
        title: codeData.info,
      });
    } else {
      return;
    }
  }
  sendCode();
}
function getCodeHandler() {
  const params = {
    is_type: 1,
    phone: account.value,
  };
  console.log(params);

  return sendsms(params);
}
/**
 * 提交
 *
 */
async function submitHandler(e: any) {
  password.value = e.detail.value.password;
  qr_password.value = e.detail.value.qr_password;
  captcha.value = e.detail.value.captcha;
  if (!account.value)
    return Tips({
      title: `请输入账号`,
    });
  if (!enterprise_name.value)
    return Tips({
      title: `请输入企业名称`,
    });
  if (!password.value)
    return Tips({
      title: `请输入密码`,
    });
  if (qr_password.value != password.value)
    return Tips({
      title: `两次输入的密码不一致！`,
    });
  if (!captcha.value)
    return Tips({
      title: `请输入验证码`,
    });

  let res = await register({
    phone: account.value,
    verify: captcha.value,
    password: password.value,
    enterprise_name: enterprise_name.value,
  });
  Tips({
    title: res.info,
  });
  let { busion_token } = res.data;
  // 确保 token 设置完成后再继续执行
  const businTokenStore = useBusinTokenStore();
  await businTokenStore.setToken(busion_token.token);

  // 等待一小段时间确保持久化完成（可选）
  await new Promise((resolve) => setTimeout(resolve, 500));

  // 获取用户信息
  try {
    const userInfoRes: any = await getUserInfo();
    const userInfoData = userInfoRes.data.business;

    // 存储用户信息
    const userInfoStore = useUserInfoStore();
    userInfoStore.setUserInfo(userInfoData);
    // 获取缓存中的主题
    setThemeHandler(
      userInfoData.theme || "dark",
      userInfoData.theme_colour || "golden"
    );
    uni.reLaunch({
      url: "/pages/tabbar/home",
      fail(err) {
        console.log(err, "跳转错误");
      },
    });
  } catch (error) {
    console.log(error, "获取用户信息失败");
  }
}
// 设置主题样式
function setThemeHandler(themeValue, subThemeValue) {
  // 合并默认主题
  const mergedTheme =
    themeList["theme"][themeValue] + themeList["sub_theme"][subThemeValue];

  uni.setStorageSync("viewColor", mergedTheme);
}
</script>

<style scoped lang="scss">
.wrap {
  min-height: 100vh;
  background: linear-gradient(
    135deg,
    rgba(205, 212, 215, 1) 6%,
    rgba(207, 214, 217, 0) 50%,
    rgba(205, 212, 215, 1) 90%
  );
  padding-top: 285rpx;
  background-image: url("/static/image/login2.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  .title_box {
    text-align: center;
    color: rgba(46, 46, 46, 1);
    font-size: 34rpx;
    margin-bottom: 55rpx;
  }
  .ChangePassword {
    padding: 0 70rpx;
  }
  .ChangePassword .phone {
    font-size: 30rpx;
    font-weight: bold;
    text-align: center;
    margin-top: 55rpx;
  }

  .ChangePassword .list {
    // width: 700rpx;
    margin: 53rpx auto 0 auto;
  }

  .ChangePassword .list .item {
    position: relative;
    padding: 30rpx 34rpx;
    // background: #fff;
    color: #383838;
    border-radius: 12rpx;
    margin-bottom: 14rpx;
    border-bottom: 2rpx solid rgba(232, 232, 232, 1);
    .label_box {
      display: inline-block;
      width: 130rpx;
    }

    .code {
      position: absolute;
      background-color: unset;
      color: rgba(13, 129, 211, 1);
      font-size: 30rpx;
      bottom: 50%;
      transform: translateY(50%);
      right: 30rpx;
      z-index: 999;
    }

    input {
      font-size: 30rpx;
      flex: 1;
    }
  }
  .ChangePassword .list .item .placeholder {
    color: #b9b9bc;
  }

  .ChangePassword .list .item .code {
    font-size: 30rpx;
    background-color: #fff;
  }

  .ChangePassword .list .item .code.on {
    color: #b9b9bc !important;
  }

  .ChangePassword .confirmBnt {
    font-size: 30rpx;
    width: 600rpx;
    height: 80rpx;
    background: var(--veiw-theme);
    border-radius: 20rpx;
    color: rgba(46, 46, 46, 1);
    margin: 92rpx auto 0 auto;
    text-align: center;
    line-height: 90rpx;
  }
}
</style>
